<script setup>
import { Plus } from "@element-plus/icons-vue";
import useTable from "@/utils/useTable";
import {http} from "@/api";
import {defaultMockMenu} from "@/utils/common";
function getMenuName(menu) {
  let menuName = []
  menu.forEach(code => {
    defaultMockMenu.forEach(el2 => {
      console.log(el2)
      if (code === el2.code) {
        menuName.push(el2.name)
      }
      if (el2.children && el2.children.length) {
        el2.children.forEach(el3 => {
          if (code === el3.code) {
            menuName.push(el2.name + '-' + el3.name)
          }
        })
      }
    })
  })
  return menuName.join(',')
}
/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete
} = useTable({
  format: (res) => {
    return res.map(el => {
      return {
        ...el,
        menu_name: getMenuName((el.menu || '').split(','))
      }
    })
  },
  requestFn: http.role,
  routerPre: 'role',
  params: {
    role: '',
  }
})
</script>


<template>
  <PageMain title="角色管理">
    <el-form label-suffix="：" inline>
      <el-form-item label="角色名称">
        <el-input clearable v-model="searchParams.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="add-box">
      <el-button type="primary" :icon="Plus" @click="openAdd">添加</el-button>
    </div>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="角色名称" prop="name"></el-table-column>
        <el-table-column label="权限" prop="menu_name">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="openDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
